<style>
  * {
    margin: 0;
    padding: 0;
  }

  #box {
    width: 500px;
    margin: 20px auto;
  }

  ul,
  li {
    list-style: none;
  }

  input {
    width: 100%;
    height: 26px;
    line-height: 26px;
  }

  li:hover {
    background-color: beige;
  }
</style>

<div id="box">
  <input type="text" id="ipt" />
  <ul id="list"></ul>
</div>

<script src="./libs/jquery-1.12.4.min.js"></script>
<script src="./libs/template-web.js"></script>
<script type="text/html" id="item">
  {{ each data v }}
  <li>{{ v.title }}</li>
  {{ /each }}
</script>

<script>
  // 🎈1. 准备一个存放定时器id的变量
  let timer
  // 当输入框的键盘弹起的时候，发送请求，获取搜索建议
  $('#ipt').on('keyup', function (e) {
    // 🎈 3.清除清楚以前的定时器
    clearTimeout(timer)
    const str = $(this).val().trim()
    // 如果输入框为空，隐藏列表
    if (str === '') return $('#list').hide()
    // console.log(str)
    // 🎈 2.启动单次定时器，约定 1s 之后发送请求
    timer = setTimeout(() => {
      $.ajax({
        type: 'get',
        url: 'http://localhost:8080/api/v1/admin/article/query',
        headers: {
          Authorization:
            'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoiYWRtaW4iLCJleHAiOjIyMjU5NDgxMzMsImlhdCI6MTYyMTE0ODEzM30.1_VDfkQ2G0DLDgoxMiS6J8sZpqsyGt2S9a-pRoU2ynPsRGu6o9pdgLlkYhGjZ7U1PwaDfJvXE7WrsFiZBf6PvhKp3VxMhkatxuX06H_it5oOAhU97MwgPBLGAReLTq5euauXrsvK_hWQspUPB2EJPtZyXgzlRDe6ccyekfcEzsA',
        },
        data: {
          key: str,
        },
        success: (res) => {
          console.log(res)
          // const arr = res.data.data;
          const htmlStr = template('item', res.data)
          // console.log(htmlStr);
          $('#list').html(htmlStr).show()
        },
      })
    }, 1000)
  })
</script>
